<template>
  <div class="cardBox">
    <el-row :gutter="20">
      <el-col
        v-for="(item, index) in tableData"
        :key="index"
        :span="screenWidth < 1688 ? 8 : 6"
        class="col"
      >
        <div class="colBox">
          <div class="topBox">
            <img
              :src="item.filePath ? action + item.filePath : ''"
              alt="暂无图片"
              class="proImg"
            />
            <dic class="infoBox">
              <div class="smallInfoBox">
                <span class="title">产品编码：</span>
                <span :title="item.code" class="info span-ellipsis">{{
                  item.code
                }}</span>
              </div>
              <div class="smallInfoBox">
                <span class="title">生产厂家：</span>
                <span :title="item.brandName" class="info span-ellipsis">{{
                  item.brandName
                }}</span>
              </div>
              <div class="smallInfoBox">
                <span class="title">规格：</span>
                <span :title="item.standard" class="info span-ellipsis">{{
                  item.standard
                }}</span>
              </div>
              <div class="smallInfoBox">
                <span class="title">产品证照：</span>
                <span :title="item.licenseName" class="info span-ellipsis">{{
                  item.licenseName
                }}</span>
              </div>
              <div v-if="item.price == 0 || item.price" class="price">
                ￥{{ item.price }}
              </div>
            </dic>
          </div>
          <div :title="item.commonName" class="proName span-ellipsis">
            {{ item.commonName }}
          </div>
          <div class="line"></div>
          <div class="footerBox">
            <span class="infoBox1">
              <span class="title">库存量：</span>
              <span class="info"
                >{{ item.exportStockQty }}{{ item.unitName }}</span
              >
            </span>
            <span class="infoBox2">
              <span class="title">申领量：</span>
              <span class="info">
                <el-input-number
                  v-model="item.largeUnitQty"
                  :min="1"
                  style="width: 110px"
                  controls-position="right"
                  @change="(val) => changeQty(val, item)"
                />
                {{ item.unitName }}
              </span>
              <span>
                <img
                  title="加入购物车"
                  src="@/assets/image/cart.png"
                  class="cartImg"
                  @click="addCart(item, index)"
                />
              </span>
            </span>
          </div>
        </div>
      </el-col>
    </el-row>
    <pagination
      v-if="total"
      :total="total"
      v-model:page="queryParams.curPage"
      v-model:limit="queryParams.pageSize"
      v-model:pageSizes="queryParams.pageSizes"
      class="pagination"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="useApplicationCardList">
const { proxy } = getCurrentInstance()
import { ElMessageBox } from 'element-plus'
import axios from 'axios'
const props = defineProps({
  tableData: {
    type: Array,
    default: () => {
      return []
    },
  },
  total: {
    type: Number,
    default: 0,
  },
})
const queryParams = ref({
  total: 0,
  curPage: 1,
  pageSize: 12,
  pageSizes: [12, 24, 36, 48],
})
const screenWidth = ref('')
const action = ref(axios.defaults.baseURL + '/pub')
const systemConfig = ref(proxy.$store.state.permission.systemConfig)

onMounted(() => {
  screenWidth.value = document.body.clientWidth
  window.onresize = () => {
    return (() => {
      screenWidth.value = document.body.clientWidth
    })()
  }
})

function changeQty(val, row) {
  let smallUnitQty = parseFloat(row.smallUnitQty || 0)
  let unitConvertCoefficient = parseFloat(row.unitConvertCoefficient || 1)
  let largeUnitQty = parseFloat(row.largeUnitQty || 0)
  let calcQty = proxy.$fn.accAdd(
    proxy.$fn.accMul(largeUnitQty, unitConvertCoefficient),
    smallUnitQty
  )
  console.log(calcQty)
  let qty = proxy.$fn.accDiv(calcQty, unitConvertCoefficient)
  row['calcQty'] = calcQty - 0
  row['qty'] = qty - 0
}
function getList() {
  proxy.$emit('getList', queryParams.value)
}
console.log(systemConfig.value.allow_use_qty_greater_stock)
function addCart(row, index) {
  if (!row.qty) {
    proxy.$message.warning('申领量必须大于0！')
    return
  }
  if (!row.exportStockQty) {
    row.exportStockQty = 0
  }
  if (
    row.qty > row.exportStockQty &&
    systemConfig.value.allow_use_qty_greater_stock === 0
  ) {
    proxy.$message({
      duration: 3500,
      type: 'error',
      showClose: true,
      message: `产品【${row.commonName}】申请数量不能大于领出仓库可用数量`,
    })
  } else if (row.qty > row.exportStockQty) {
    ElMessageBox.confirm(
      `产品【${row.commonName}】申请数量大于领出仓库可用数量`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        getHighQty(row, index)
      })
      .catch(() => {})
  } else {
    getHighQty(row, index)
  }
}
function getHighQty(row, index) {
  let qty = proxy.$fn.accDiv(
    proxy.$fn.accAdd(row.calcQty || 0, row.depotStockCalcQty),
    row.unitConvertCoefficient
  )
  const tempBool = qty > row.depotStockHighQty
  if (tempBool) {
    ElMessageBox.confirm(
      `产品【${row.commonName}】申请数量加领入仓库总数大于仓库高水位`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      proxy.$emit('addCart', {
        row,
        index,
      })
    })
  } else {
    proxy.$emit('addCart', {
      row,
      index,
    })
  }
}
</script>

<style lang="scss" scoped>
.cardBox {
  .col {
    margin-bottom: 20px;
  }
  .colBox {
    line-height: 20px;
    font-size: 12px;
    border: 1px solid #ccc;
    height: 160px;
    border-radius: 4px;
    padding: 6px;
    .topBox {
      display: flex;
      justify-content: space-between;
      .infoBox {
        display: inline-block;
        width: calc(100% - 140px);
        padding-left: 10px;
        .smallInfoBox {
          display: flex;
          align-items: center;
        }
        .title {
          font-weight: 700;
        }
        .info {
          display: inline-block;
          width: calc(100% - 60px);
        }
      }
      .proImg {
        width: 140px;
        height: 100px;
      }
      .price {
        font-size: 16px;
        color: rgb(255, 0, 60);
      }
    }
    .proName {
      margin-top: 6px;
      font-size: 16px;
      font-weight: 700;
    }
    .line {
      height: 2px;
      margin: 4px 0;
      background-color: #eee;
    }
    .footerBox {
      display: flex;
      align-items: center;
      .infoBox1 {
        flex: 1;
        padding-right: 6px;
      }
      .cartImg {
        float: right;
        padding-left: 20px;
        width: 26px;
        cursor: pointer;
      }
    }
  }
  .pagination {
    padding: 12px 16px 32px;
  }
}
</style>
